import 'ace-builds';
import 'ace-builds/src-noconflict/ext-language_tools'; // 代码提示
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/mode-sql'; // SQL 语法高亮
import 'ace-builds/src-noconflict/theme-github'; // 主题
import 'ace-builds/src-noconflict/theme-monokai';

import React from 'react';
import AceEditor from 'react-ace';
import styled from 'styled-components';

const AceEditorStyled = styled.div`
  position: relative;

  * {
    font-family: monospace !important;
  }
`;
interface JsonInputProps {
  value?: string;
  height?: number;
  onChange?: (value: string) => void;
}
const JsonInput: React.FC<JsonInputProps> = ({
  value,
  height,
  onChange = () => {},
}) => {
  return (
    <AceEditorStyled>
      <AceEditor
        width="100%"
        fontSize={16}
        height={height ? `${height}px` : undefined}
        mode="sql"
        // theme="monokai"
        name="UNIQUE_ID_OF_DIV"
        value={value}
        onChange={onChange}
      />
    </AceEditorStyled>
  );
};

export default JsonInput;
